<template>
  <div>
    <div class="goods" v-for="(item,index) in cartarr" :key="index">
      {{item.title}}
      <div class="goodsright">
        <van-stepper v-model="item.cartCount" :min="0" :minus="removeCart(index)" :plus="addCart(index)" ref="stepper" />
      </div>
    </div>
    <van-button type="primary" size="large">下单</van-button>
    <van-button type="default" size="large" @click="clearcart">清空购物车</van-button>
  </div>

</template>
<script>
import { mapState } from 'vuex';
export default {
  data () {
    return {
      // cartarr: [
      //   {
      //     title: '小米手机',
      //     cartCount: 5
      //   },
      //   {
      //     title: '华为手机',
      //     cartCount: 2
      //   }
      // ]
    }
  },
  computed: {
    ...mapState({
      cartarr: state => state.cartarry
    })
  },
  methods: {
    //减少商品
    removeCart (index) {
      this.$store.commit('cartremove', index)

    },
    //增加商品
    addCart (index) {
      this.$store.commit('cartadd', index)
    },
    //清空购物车
    clearcart () {
      this.$store.commit('clearcart')
    }
  }
}
</script>
<style scoped>
.goods {
  padding: 10px;
  text-align: left;
}
.goodsright {
  float: right;
}
</style>
